<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas-demos</title>

    <style>
        canvas {
            margin: 0 auto;
            border: 2px solid #aaa;
            display: block;
        }
    </style>
</head>

<body>
<canvas id="cont" width="500px" height="500px">浏览器不支持</canvas>
<!--只能使用原生的js,如果让canvas左右居中使用display:block-->
<script>
    // 固定start获取画布
    const canvas = document.querySelector('#cont')
    // 获取画布上下文
    const ctx = canvas.getContext('2d')
    // 固定end

    // 直线虚线
    for (let i = 0; i < 30; i++) {
        drawLine(100 + 10 * i, 100, 105 + 10 * i, 100, 'red', 2)
    }

    // 斜线虚线
    for (let i = 0; i < 30; i++) {
        drawLine(100 + 10 * i, 100 + 10 * i, 105 + 10 * i, 105 + 10 * i, 'green', 2)
    }

    /**
     * 画出直线方法
     * @param x1
     * @param y1
     * @param x2
     * @param y2
     * @param color
     * @param width
     */
    function drawLine(x1, y1, x2, y2, color, width) {
        // 画图开始:开启一条路径
        ctx.beginPath()
        // 确定起始点
        ctx.moveTo(x1, y1)
        // 确定结束点
        ctx.lineTo(x2, y2)
        // 在着色之前设置颜色和线宽
        ctx.strokeStyle = color
        ctx.lineWidth = width
        // 着色
        ctx.stroke()
        // 结束路径
        ctx.closePath()
    }
</script>
</body>
</html>
